import type { Config } from 'tailwindcss'
import defaultTheme from 'tailwindcss/defaultTheme'

export default <Partial<Config>>{
  theme: {
    extend: {
      // 扩展字体大小
      fontSize: {
        titleSize: '3rem',
      },
      // 扩展自定义颜色
      colors: {
        'custom-green': '#609966',
      },
      // 如果背景色和文字颜色完全一致，可以直接放到colors里面，否则应该分开放
      backgroundColor: {
        primary: 'rgb(var(--color-primary) / <alpha-value>)',
        secondary: 'rgb(var(--color-secondary) / <alpha-value>)',
        background: 'rgb(var(--color-background) / <alpha-value>)',
        foreground: 'rgb(var(--color-foreground) / <alpha-value>)',
        separator: 'rgb(var(--color-separator) / <alpha-value>)',
      },
      textColor: {
        primary: 'rgb(var(--color-foreground) / <alpha-value>)',
      },
      /*
      tailwind默认间距比
      Name  Size          Pixels
      0     0px           0px
      px    1px           1px
      0.5   0.125rem      2px
      1     0.25rem       4px
      1.5   0.375rem      6px
      2     0.5rem        8px
      */
      spacing: {
        /**
         * 应该优先采用rem单位的值
         */
        pGap: '3rem',
        largeSize: '100px',
      },
    },
    screens: {
      // 横屏且最大高度为431px
      'v-small': {
        raw: 'all and (orientation: landscape) and (max-height: 431px)',
      },
      // 最大高度为668px
      'h-small': {
        raw: '(max-height: 668px)',
      },
      ...defaultTheme.screens,
    },
  },
  plugins: [],
  content: ['./docs/**/*.js', './docs/**/*.vue', './docs/**/*.ts', './docs/**/*.md'],
  options: {
    safelist: ['html', 'body'],
  },
}
